import React from 'react'
import SearchBar from './component/searchBar'
import LoginButton from './component/LoginButton'
class MainHead extends React.Component{
    componentWillMount(){
        window.addEventListener('scroll', this.handleScroll)
    }

    componentWillUnmount(){
        window.removeEventListener('scroll',this.handleScroll)
    }
    state={
        active:1,
        showBarActive:0
    }
    render(){
        let logo = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/6bdafd801c878b10edb5fed5d00969e9.svg'
        let icon = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/0911114f258a2f38db56a80c2c7dc90d.svg'
        return(
            <div onScroll={()=>this.handleScroll()} >
               <div className='mainHead' style={{display:this.state.active===1?'flex':'none',width:375,height:61,justifyContent:'center',borderBottom:'1px solid #f1f1f1',position:'fixed',zIndex:'250',backgroundColor:'#fff',transform:this.state.active===1?'translate3d(0,0,0)':'translate3d(0,-100%,0)'}}>
                    <div className='main' style={{width:360,height:60,display:'flex',alignItems:'center'}}>
                        <div className='logo' style={{width:40,}}>
                            <img src={logo} alt='掘金'></img>
                        </div>
                        <div className='showMenu' style={{width:68,height:60,display:'flex',alignItems:'center',justifyContent:'center',cursor:'pointer'}} onClick={this.showBar}>
                            <div className='title' style={{fontSize:16,height:20,width:32,lineHeight:'20px',color:'#1E80FF',textAlign:'center',marginRight:'10px'}}>
                                首页
                            </div>
                            <div className='icon'>
                                <img alt='down' src={icon}></img>
                            </div>
                        </div>
                        <div className='hideBar' style={{display:this.state.showBarActive===1?'block':'none',position:'absolute',width:170,height:240,backgroundColor:'#fff',top:60,left:0,fontSize:'16px',flexDirection:'column',color:'#86909C',boxShadow:'0 1px 2px 0 rgb(0 0 0 / 10%)',border:'1px solid rgba(177,180,185,0.45)',borderRadius:'4px'}}>
                            <div className='item'  style={{height:48,lineHeight:'48px',textAlign:'center',color:'#1e80ff'}}>
                                首页
                            </div>
                            <div className='item'  style={{height:48,lineHeight:'48px',textAlign:'center'}}>
                                沸点
                            </div>
                            <div className='item'  style={{height:48,lineHeight:'48px',textAlign:'center'}}>
                                资讯
                            </div>
                            <div className='item'  style={{height:48,lineHeight:'48px',textAlign:'center'}}>
                                小册
                            </div>
                            <div className='item'  style={{height:48,lineHeight:'48px',textAlign:'center'}}>
                                活动
                            </div>

                        </div>
                        <div className='space' style={{width:27,height:60}}>

                        </div>
                        <div className='searchBar' style={{width:150,height:60}}>
                            <SearchBar/>
                        </div>
                        <div className='loginButton' style={{width:75,height:60}}>
                            <LoginButton/>
                        </div>
                    </div>
               </div> 
            </div>
        )
    }
    showBar=()=>{
        if(this.state.showBarActive===0)
            this.setState({
                showBarActive:1
            })
        else
            this.setState({
                showBarActive:0
            })
    }
    handleScroll=()=> {
        let b = document.documentElement.scrollTop
        if(b>100&&this.state.active===1)
            {
                this.setState({
                    active:0
                })
            }
        if(b<100)
        {
            this.setState({
                active:1
            })
        }
    //     if(b===a)
    //     {
    //         this.setState({
    //         total:this.state.total.concat(data),
    //         })
    //     }
    }
}

export default MainHead